<template>
	<view class="qqinfob mb50">
		<view class="bj_between mb30">
			<view class="bj_left">
				<text>{{$t("tx.tit5")}}</text>
				<image src="/static/page3/re.png" :class="rec" class="qqinfob-re" @click="winit"></image>
			</view>
			<view class="f32">
				{{$t("menu.$")}}
				{{info.user.money}}
			</view>
		</view>
		<view class="bj_between f24 mb20">
			<view class="">
				{{$t("tx.tit6")}}
			</view>
			<view class="">
				{{info.withdraw.process}}%
			</view>
		</view>
		<view class="qqinfob-jdt mb20">
			<view class="qqinfob-jdt-jdtm" :style="'width: '+info.withdraw.process+'%'">

			</view>
		</view>
		<view class="bj_right">
			<view class="qqinfob-sbtn bj_center f24">
				<text>{{$t("tx.sbtn1")}}</text>
				<image src="/static/hd/wh.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import useI18n from '@/store/useI18n.js'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from "../../js/common";
	const {
		t
	} = useI18n()
	let info = ref(getApp().globalData.userInfo)
	let rec = ref("")
	onShow(function() {
		winit();
	})

	function winit() {
		rec.value = "recl"
		common.withdrawIinit({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			info.value.withdraw = res.data.data
			rec.value = ""
		})
	}
</script>

<style scoped lang="scss">
	.qqinfob {
		height: 256rpx;
		background: url("/static/page3/txb.png") no-repeat center center;
		background-size: 100% 100%;
		padding: 36rpx 24rpx 0;

		&-sbtn {
			width: 112rpx;
			height: 36rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 100rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		&-re {
			width: 32rpx;
			height: 32rpx;
		}

		&-jdt {
			background: #003311;
			height: 20rpx;
			position: relative;
			border-radius: 100rpx;

			&-jdtm {
				background: #FFBE32;
				height: 20rpx;
				position: absolute;
				border-radius: 100rpx;
				left: 0;
				top: 0;
			}
		}
	}
</style>